<template>
    <el-container class="jxc_buy_goods_report_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate
                    slot="header"
                    ref="header"
                    :table-ref="tableOptions.ref"
                    :toolbar_buttons="headerOption.toolbar_buttons"
                    :toolbar_filter="headerOption.toolbar_filter"
                    :searchForm="searchForm"
                    :isSearchInput="false"
                    @event="handleHeaderEvent">
                    <template slot="toolbar_buttons">
                        <div style="line-height: 34px; display: flex;">
                            <div style="margin-right: 2em;">
                                <el-button type="primary" icon="el-icon-bottom" @click="handleExport">导出</el-button>
                            </div>
                            <div>
                                <el-radio-group v-model="checkRadio" @change="initPage">
                                    <el-radio :label="1">采购报表</el-radio>
                                    <el-radio :label="2">采购退货报表</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </template>
                    <template slot="right_search">
                        <el-form-item label="日期" style="margin-top: 4px; margin-bottom: 4px;">
                            <el-date-picker
                                v-model="searchForm.order_date"
                                type="daterange"
                                placeholder="请选择日期"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                format="yyyy年MM月dd日"
                                style="width: 280px;"
                            />
                        </el-form-item>
                    </template>
                </headerTemplate>
                <vxeTableTemplate
                    ref="xTable"
                    :data="dataList"
                    :options="tableOptions"
                    @handleChangePage="handleChangePage"
                />
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import poiApi from "@common/api/poiApi";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "JxcBuyGoodsReport",
    data() {
        let _this = this;
        return {
            headerOption: {
                toolbar_buttons: [],
                toolbar_filter: [
                    { type: "text", field: "goods_code", label: "物料编号" },
                    { type: "text", field: "goods_name", label: "物料名称" },
                ],
            },
            checkRadio: 1,
            searchForm: {},
            dataList: [],
            tableOptions: {
                ref: "JxcBuyGoodsReportTable",
                container: ".jxc_buy_goods_report_container",
                multiSelect: false,
                showSummary: true,
                summaryArray: ["total_qty", "total_amount"],
                columns:[
                    {
                        label: '物料编号',
                        prop: 'goods_code',
                        align: 'center',
                        minWidth: 100,
                    },
                    {
                        label: '物料名称',
                        prop: 'goods_name',
                        align: 'center',
                        minWidth: 100,
                    },
                    {
                        label: '规格',
                        prop: 'goods_specifications',
                        align: 'center',
                        minWidth: 100,
                        render: (h, {row}) => {
                            if (row.goods_specifications) {
                                let specificationArr = JSON.parse(row.goods_specifications);
                                let arr = specificationArr.map(item => {
                                    return h("el-tag", {
                                        style: {
                                            'margin-right': '5px',
                                        },
                                        props: {},
                                    }, `${item.specification}：${item.value}`);
                                });
                                return h('div', {}, arr);
                            } else {
                                return h('div', {});
                            }
                        },
                    },
                    {
                        label: '总数量',
                        prop: 'total_qty',
                        align: 'center',
                        minWidth: 100,
                    },
                    {
                        label: '总金额',
                        prop: 'total_amount',
                        align: 'center',
                        minWidth: 100,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                ],
                operates: false,
                pagination: {
                    pageIndex: 1,
                },
            },
        };
    },
    mounted() {
        this.initPage();
    },
    methods: {
        // 初始化
        initPage() {
            let _this = this;
            if (!_this.searchForm.order_date || _this.searchForm.order_date.length === 0) {
                _this.beforeThree();
            }
            if (_this.checkRadio === 1) {
                _this.getList(true);
            } else {
                _this.getReturnList(true);
            }
        },
        // 刷新、查询
        handleHeaderEvent(event) {
            let _this = this;
            _this.searchForm = $.extend({}, _this.searchForm, event.searchForm);
            if (event.type === "search") {
                _this.initPage();
            } else if (event.type === "refresh") {
                _this.initPage();
            }
        },
        // 选择页
        handleChangePage(page) {
            let _this = this;
            _this.tableOptions.pagination.pageIndex = page.pageIndex;
            _this.tableOptions.pagination.pageSize = page.pageSize;
            _this.getList(true);
        },
        // 获取列表信息
        getList(query) {
            let _this = this;
            if (query) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            _this.fetchData(_this.$api.API_FindBuyGoodsReportListByPage, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {

            });
        },
        //
        getReturnList(query) {
            let _this = this;
            if (query) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            _this.fetchData(_this.$api.API_FindBuyReturnGoodsReportListByPage, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {

            });
        },
        // 获取前三个月
        beforeThree() {
            const dates = new Date();
            let endOrderDate = this.$utils.formatDate(dates, 'yyyy-MM-dd');
            dates.setMonth(dates.getMonth() - 3)
            let pastMonth = dates.getMonth() + 1
            let pastDay = dates.getDate()
            if (pastMonth >= 1 && pastMonth <= 9) {
                pastMonth = '0' + pastMonth
            }
            if (pastDay >= 0 && pastDay <= 9) {
                pastDay = '0' + pastDay
            }
            const endDate = dates.getFullYear() + '-' + pastMonth + '-' + pastDay;
            let beginOrderDate = this.$utils.formatDate(endDate, 'yyyy-MM-dd');
            this.searchForm = $.extend({}, this.searchForm, {order_date: [beginOrderDate, endOrderDate]});
            return endDate
        },
        // 导出Excel
        handleExport() {
            const _this = this;
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            let templateName = _this.$api.EXPORT_TEMPLATE_NAME_BUY_GOODS;
            let outputName =  _this.checkRadio === 1 ? '采购报表' : '采购退货报表';
            let url = _this.checkRadio === 1 ? _this.$api.API_FindBuyGoodsReportListByPage : _this.$api.API_FindBuyReturnGoodsReportListByPage;
            poiApi.exportExcelTemplate(templateName, url, queryData, outputName, {}, undefined, 1, 100, false, true);
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.jxc_buy_goods_report_container {
    /deep/ .el-date-editor .el-range-separator {
        padding: 0 5px;
        line-height: 21px;
        width: 10%;
        color: #303133;
    }
}
</style>
